<template>
  <div class="dy-main">
    <div class="dy-header">
      <x-header :right-options="{showMore: true}" :left-options="{preventGoBack:true}" @on-click-back="back" @on-click-more="showMenus = true">标题</x-header>
    </div>
    <div class="dy-body">
      {{ mydata }}
      <grid :cols="4" :show-lr-borders="false">
        <grid-item v-for="(nav, index) in navData" v-bind:key="index">
          <div class="cbox-inner" @click="clickNav(nav.path)">
            <img :src="nav.img" width="50%" height="50%">
            <br>
            <span>{{ nav.text }}</span>
          </div>
        </grid-item>
      </grid>
      <!-- <div class="my-test">
        <div class="big-box">
          <div class="big-w">
            <div class="border-box">
              <div class="pic">
                <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1438475101,354016904&fm=58">
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <div class="dy-footer"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mydata: '',
      navData: [
        {id: 1, img: require('../../../src/assets/img/plus.png'), text: '输入验证', path: 'inputReg'},
        {id: 2, img: require('../../../src/assets/img/plus.png'), text: 'cellDemo', path: 'cellDemo'},
        {id: 3, img: require('../../../src/assets/img/plus.png'), text: '图表', path: 'charts'},
        {id: 4, img: require('../../../src/assets/img/plus.png'), text: '弹窗', path: 'dialog'},
        {id: 5, img: require('../../../src/assets/img/plus.png'), text: '图文提示', path: 'msgtips'},
        {id: 5, img: require('../../../src/assets/img/plus.png'), text: '上传图片', path: 'upfileImg'},
        {id: 5, img: require('../../../src/assets/img/plus.png'), text: '时间快捷设置', path: 'timeFast'}
      ]
    }
  },
  computed: { },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    clickNav (val) {
      this.$router.push({path: val, query: {name: 'myname'}})
      // this.$bridge.callhandler('openWeb', {'url': val, 'closeCurrUI': 'false'}, (response) => {})
    }
  },
  mounted () {
    let _this = this
    this.$bridge.callhandler('nativeRequest',
      JSON.stringify({
        'requstSource': 'internetRequest',
        'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
        'params': {'method_Name': 'CI009012', 'user_Data': {'cardNo': '88596867675855'}}
      }),
      function (response) {
        _this.mydata = JSON.stringify(response)
      }
    )
  }
}
</script>
<style>
.cbox-inner { text-align: center;}
/* .big-box { padding:0 0.85rem; height: 2.3rem; margin-top: 10px;}
.big-w { background: #fff; height: 100%; padding: 0.2rem;}
.border-box { border:1px solid rgb(230, 230, 230); height: 100%; padding: 0.2rem;}
.pic { background: rgba(230,230,230,0.6); width: 100%; height: 100%; text-align: center; box-sizing: border-box;}
.pic:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; width: 0;}
.pic img { max-width: 100%; max-height: 100%; vertical-align: middle;} */
</style>
